<template>
  <!-- 策略管理 页面 -->
  <div class="policyManage-page">
    <el-form ref="formInline1" :inline="true" label-width="80px" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属投顾" prop="investName">
        <el-input v-model="formInline.investName" clearable placeholder="请输入所属投顾名称" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item label="策略名称" prop="strategyName">
        <el-input v-model="formInline.strategyName" clearable placeholder="请输入策略名称" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 20px">
        <el-button class="bg-green" @click="getList">查询</el-button>
        <el-button type="danger" class="search-box" @click="addOrUpdateHandle()">添加</el-button>
        <el-button @click="resetForm(['formInline1', 'formInline2', 'formInline3', 'formInline4', 'formInline5'])">重置</el-button>
      </el-form-item>
    </el-form>
  
    <!-- 未展示 收益-风险区间 部分值 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border fit
      size="mini"
      :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" align="center" width="52" fixed></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyName" label="策略名称" min-width="200" fixed show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.strategyInfoVo.hasNetWorthStatus" v-strategy="{id:scope.row.strategyInfoVo.strategyId, userId}">{{ scope.row.strategyInfoVo.strategyName }}</span>
          <span v-else style="color: #999;cursor: pointer;" @click="$message('该策略净值不存在或者少于2条')">{{ scope.row.strategyInfoVo.strategyName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="strategyInfoVo.investName" label="所属投顾" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyMarket" label="投资市场" align="center" min-width="100"></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyStyle" label="投资风格" align="center" width="80"></el-table-column>
      <el-table-column prop="strategyInfoVo.strategyMethod" label="投资方法" align="center" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.strategySubject" label="投资标的" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="strategyInfoVo.makeTime" label="成立日期" sortable align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.strategyInfoVo.makeTime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="netWorthDetialBean.networthTime" label="净值时间" sortable align="center" width="100"></el-table-column>
      <el-table-column prop="netWorthDetialBean.unitNetworth" label="单位净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.reinstatementNetworth" label="累计净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.cumulativeNetworth" label="复权净值" sortable align="center" width="94"></el-table-column>
      <el-table-column prop="netWorthDetialBean.thisyearAnnualizedincomeRate" label="今年以来收益率" sortable align="center" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate!=null" :class="scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.netWorthDetialBean.thisyearAnnualizedincomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
       <el-table-column prop="netWorthDetialBean.annualizedincomeRate" label="收益率" sortable align="center" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.annualizedincomeRate!=null" :class="scope.row.netWorthDetialBean.annualizedincomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.netWorthDetialBean.annualizedincomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="netWorthDetialBean.maximumDrawdownRate" label="最大回撤" sortable align="center" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.maximumDrawdownRate!=null">{{ scope.row.netWorthDetialBean.maximumDrawdownRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="netWorthDetialBean.yearAnnualizedincomeRate" label="收益率(年化)" sortable align="center" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.yearAnnualizedincomeRate!=null" :class="scope.row.netWorthDetialBean.yearAnnualizedincomeRate>0?'positiveFc':'negativeFc'">
            {{ scope.row.netWorthDetialBean.yearAnnualizedincomeRate }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="netWorthDetialBean.yearAnnualfluctuationsRate" label="波动率(年化)" sortable align="center" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.yearAnnualfluctuationsRate!=null">{{ scope.row.netWorthDetialBean.yearAnnualfluctuationsRate }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="netWorthDetialBean.sharpeRate" label="夏普率" align="center" sortable width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.netWorthDetialBean.sharpeRate!=null">{{ scope.row.netWorthDetialBean.sharpeRate }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template slot-scope="{row}">
          <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addOrUpdateHandle(row.strategyInfoVo.strategyId)">
            编辑
          </el-button>
          <el-button class="filter-item" size="mini" type="primary" icon="el-icon-delete" @click="deleteHandle(row.strategyInfoVo)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />
    
    <relationStrategyAddOpen v-if="relationStrategyView" ref="relationStrategyAddOpen" :userId="userId" @addStrategyName="getList"></relationStrategyAddOpen>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchList } from '@/api/policyManage'
import { deleteClassifyStrategyExt } from '@/api/groupManage'
import Pagination from '@/components/Pagination'
import relationStrategyAddOpen from './relationStrategyAddOpen.vue'
import { parseTime } from '@/utils'


export default {
  name: 'PolicyManage',
  components: { Pagination, relationStrategyAddOpen },
  data() {
    return {
      dict: [],

      relationStrategyView: false,

      searchProfitList: ['收益排名10%', '收益排名20%', '收益排名30%'],
      maximumDrawdownRateList: ['回撤排名10%', '回撤排名20%', '回撤排名30%'],
      sharpeRateList: ['夏普比率排名10%', '夏普比率排名20%', '夏普比率排名30%'],
      sharpeNum: '',
      syl: '',
      zdhc: '',

      isSelectMore: true,
      selectCreateDateList: ['6个月以下', '6个月-1年', '1-3年', '3-5年', '5年以上'],
      selectCreateDate: '',
      selectNewDataList: ['15天内', '30天内', '45天内', '60天内'],
      selectNewData: '',
      formInline: {
        segment: 0,
        startMakeTime: null,
        endMakeTime: null,
        date3: null,
        date4: null,
      },

      total: 0,
      listLoading: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list: [],
      multipleSelection: [],

      uploadBtnIcon: '',

    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    syl(i) {
      const list = [10,20,30]
      this.formInline.syl1 = 0
      this.formInline.syl2 = list[i]
    },
    zdhc(i) {
      const list = [10,20,30]
      this.formInline.zdhc1 = 0
      this.formInline.zdhc2 = list[i]
    },
    sharpeNum(i) {
      const list = [10,20,30]
      this.formInline.sharpeNum1 = 0
      this.formInline.sharpeNum2 = list[i]
    },
    selectCreateDate(val) {
      if(typeof val === 'number') {
        const list = [[0, 6], [6, 12], [12, 36], [36, 60], [60, 0]]
        this.formInline.startMakeTime = this.stageDate(list[val][0], list[val][1])[0]
        this.formInline.endMakeTime = this.stageDate(list[val][0], list[val][1])[1]
        if(val == 4) this.formInline.startMakeTime = null
      }else {
        this.formInline.startMakeTime = null
        this.formInline.endMakeTime = null
      }
    },
    selectNewData(val) {
      if(typeof val === 'number') {
        const list = [15, 30, 45, 60]
        const startTime = new Date().getTime() - 3600 * 1000 * 24 * list[val]
        const start = parseTime(startTime, '{y}-{m}-{d}')
        this.formInline.date3 = start
        this.formInline.date4 = parseTime(new Date(), '{y}-{m}-{d}')
      }else {
        this.formInline.date3 = ''
        this.formInline.date4 = ''
      }
    },
  },
  created() {
    this.formInline.classifyId = this.$route.query.classifyId
    this.getList()
  },
  methods: {
    addOrUpdateHandle(strategyId) {
      this.relationStrategyView = true
      this.$nextTick(() => {
        this.$refs.relationStrategyAddOpen.init(this.formInline.classifyId, strategyId)
      })
    },
    deleteHandle(row) {
      this.$confirm(`确认删除策略名称【${row.strategyName}】此条数据？`, '提示', {
        type: 'warning'
      }).then(_ => {
        deleteClassifyStrategyExt({
          strategyId: row.strategyId,
          classifyId: this.formInline.classifyId
        }).then(res => {
          if(res.code == 0) {
            this.$notify({
              type: 'success',
              message: '删除成功',
              duration: 2000
            })
            this.getList()
          }
        })
      }).catch(_ => {})
    },
    stageDate(s, e) {
      const s_time = s ? s*30 : 1
      const day = parseTime(new Date(), '{d}')
      const endTime = new Date().getTime() - 3600 * 1000 * 24 * s_time
      const startTime = new Date().getTime() - 3600 * 1000 * 24 * e * 30.5
      let end = parseTime(endTime, '{y}-{m}-{d}')
      let start = parseTime(startTime, '{y}-{m}-{d}')
      const endList = end.split('-')
      const startList = start.split('-')
      endList[2] = day
      startList[2] = day
      start = startList.join('-')
      end = endList.join('-')
      return [start, end]
    },
    resetForm(formNameList) {
      formNameList.forEach(element => {
        this.$refs[element].resetFields()
      })
      this.selectCreateDate = ''
      this.selectNewData = ''
      this.formInline = {
        segment: 0
      }
      this.$router.push('/policyManage')
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchList({
        userId: this.userId,
        ...this.listQuery,
        ...this.formInline
      }).then(res => {
        this.listLoading = false
        this.list = res.body
        this.total = res.count || 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.policyManage-page {
  .new-date {
    ::v-deep .el-form-item__label {width: 100px !important;}
  }
  .label-width-120 {
    ::v-deep .el-form-item__label {width: 120px !important;}
  }
}
</style>
